<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="<c:url value="/style.css"/>" type="text/css">    
        <link rel="stylesheet" href="<c:url value="/css/dark-hive/jquery-ui-1.8.20.custom.css"/>" type="text/css"/>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <title>Video Library</title>    
    <body>        
        <div id="layoutform">
            <div id="header" class="ui-corner-all ui-state-default"><h1>Video Library</h1></div>
            <div id="container">
                <div id="right" class="ui-corner-all">               

                    <ul>
                        <li><a class="ui-state-default ui-corner-all" href="<c:url value="/Add"/>" title="Add Med">Add Medium</a></li>                        
                        
                        <li><a class="ui-state-default ui-corner-all show-button" href="#" title="Find Movies">Find Movies</a>
                        <div class="export-hidden" >                                                             
                                <form name="movie" action="<c:url value="/Find"/>" method="post" onSubmit="return validateMovie(this)"  >
                                    Name: <input   type="text" name="movieName" class="input-width" placeholder="Name (e.g. myMovie)">
                                    <input  type="submit" value="Find">
                                </form>                        
                            </div>
                        </li>
                        
                        <li><a href="#" class="ui-state-default ui-corner-all show-button" title="ODF Export" >ODF Export</a>
                            <div class="export-hidden" >                                                             
                                <form name="filename" action="<c:url value="/ExportODF"/>" method="post" onSubmit="return validateName(this)"  >
                                    First name: <input   type="text" name="fname" class="input-width" placeholder="Filename (e.g. myFile)">
                                    <input  type="submit" value="Save">
                                </form>                        
                            </div>
                        </li>

                        <li><a href="#" class="ui-state-default ui-corner-all show-button" title="ODF Import" >ODF Import</a>
                            <div class="export-hidden" >
                                <form action="<c:url value="/ImportODF"/>" method="post" onsubmit="return checkFile(this)">
                                    File name: <input type="file" name="ipath" class="input-width">
                                    <div>
                                        <input type="Submit" value="OK" name="save" >                                 
                                    </div>
                                </form>
                            </div>
                        </li> 
                        
                        <li><a class="ui-state-default ui-corner-all" href="<c:url value="/Movies"/>" title="Get All Movies"><span>Get All Movies</span></a></li>
                    </ul>
                </div>  
                <div id="left" style="font-weight: bold" class="ui-corner-all ui-state-default">
                    <table id="left-table">                        
                        <tr>                        
                            <th id="lib-name"> Name </th> 
                            <th id="lib-type"> Type </th> 
                            <th id="lib-movies"> Movies </th> 
                        </tr>
                        <c:if test="${not empty mediumXml}">
                            <c:set var="msg" value="${mediumXml}" scope="page" />   
                            <c:out value="${msg}" escapeXml="false"/>
                        </c:if>                   
                    </table>
                </div> 
                <div id="bottom"></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>


